<template>
  <div>
    <commonHeader title = '个人中心' height='300'>
        <div class='userDetail'>
            <i-avatar
              i-class="userAvatar"
              shape="cirlce"
              size="large"
              src="https://pic1.zhimg.com/v2-e9524bd287b70e64915a2d155f014072_is.jpg"
            ></i-avatar>
            <div class='userCenterContent'>
              <span class='name'>郑志伟</span>
              <span class="gender">男</span>
              <span class="age">25岁</span>
            </div>
        </div>
    </commonHeader>
    <div class="content">
      <div class="content_item" v-for="item in menu" :key="item.id" @click="handleLink(item.link)">
        <image class="content_img" :src="item.icon" />
        <p class="toRight">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '../../../common/Header.vue'
export default {
  components: {
    commonHeader: Header
  },
  data() {
    return {
      name: '科比',
      gender: '男',
      age: '40',
      img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3165862407,3625382219&fm=26&gp=0.jpg",
      link:"../my_info/main",

      menu: [
        {
          id: 0,
          name: '我的医生',
          link: '../my_doctor',
          icon: '../../../static/images/user.png'
        },
        {
          id: 1,
          name: '健康档案',
          link: '',
          icon: '../../../static/images/user.png'
        },
        {
          id: 2,
          name: '绑定手机',
          link: '',
          icon: '../../../static/images/user.png'
        },
        {
          id: 3,
          name: '意见反馈',
          link: '',
          icon: '../../../static/images/user.png'
        },
        {
          id: 4,
          name: '设置',
          link: '',
          icon: '../../../static/images/user.png'
        }
      ]
    }
  },
  methods: {
    handleLink(url) {
      console.log(url)
      wx.navigateTo({ url })
    }
  },
  mounted(){
    console.log(1)
  }
}
</script>
<style>
  .userAvatar {
    width: 140rpx!important;
    height: 140rpx!important;
    border-radius: 50%!important;
    margin-top: 10rxp!important;
  }
</style>
<style  lang='scss' scoped>
.userDetail {
  box-sizing: border-box;
  height: 190rpx;
  line-height: 190rpx;
  margin-top: 110rpx;
  position: relative;
  // bottom: 0;
  .userCenterContent {
    display: inline-block;
    position: absolute;
    margin-left: 40rpx;
    color: #ffffff;
    .name {
      font-size: 36rpx;
    }
    .gender, .age {
      margin-left: 10rpx;
      font-size: 28rpx;
    }
  }
}
.content {
  margin-top: 300rpx;
}
.content_item {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  align-items: center;
}
.content_img {
  width: 80rpx;
  height: 80rpx;
  margin-left: 10rpx;
}
.content_item p {
  flex: 1;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 32rpx;
  border-bottom: 1rpx solid #dddddd;
}
</style>